<template>
    <!--贴吧首页  （某个贴吧的首页，会显示该贴吧的信息以及贴吧下的帖子）-->
    <div>
        <!--这里需要传一个 currentUser 参数  因为导航栏要使用，不传会报错-->
<!--        <top-nav v-bind:currentUser="currentUser" ></top-nav>-->
        <top-nav @updateUser="setCurrentUser"></top-nav>

        <!--顶部搜索框-->
        <el-row type="flex" justify="center">
            <el-col :span="16">
                <searchBar></searchBar>
            </el-col>
        </el-row>

        <!--中间的主体内容-->
        <el-row type="flex" justify="center" class="bg_color_shallow_blue">
            <el-col :span="18" class="" style="">
                <!--上方贴吧信息-->
                <el-row class="" style="">
                    <el-col class="top_banner_bg">
                        <el-row class="top_bar_info" style="border-left: 1px solid #DCDFE6; border-right: 1px solid #DCDFE6; border-bottom: 1px solid #E4E7ED">
                            <!--左边贴吧头像-->
                            <el-col :span="3" :offset="2">
<!--                                <el-avatar shape="square" :size="140" style="position: relative; bottom: 50px; border: solid white 2px" fit="fit" :src="require('../../assets/images/barAvatarDemo.jpg')"></el-avatar>-->
                                <el-avatar shape="square" :size="140" style="position: relative; bottom: 50px; border: solid white 2px"
                                           fit="fit" :src="bar.barImg"></el-avatar>
                            </el-col>
                            <!--右边-->
                            <el-col :span="19" class="padding_left_10">
                                <!--贴吧、 建吧时间， 分类-->
                                <el-row class="margin_top_15" >
                                    <!--贴吧名称  加入、退出按钮-->
                                    <el-col :span="8">
<!--                                        <a href="#"><h1>我的私密吧</h1></a>-->
                                        <a href="#"><h1>{{bar.name}}</h1></a>
<!--                                        <el-button class="join_bar_btn" type="success" round size="small">加入贴吧</el-button>-->
                                        <el-button class="join_bar_btn" @click="joinBar(barId)" type="success" round size="small"
                                                   v-if="!bar.joined">加入贴吧</el-button>
                                        <el-button class="join_bar_btn" @click="exitBar(barId)" type="info" round size="small"
                                                   v-else>退出贴吧</el-button>
                                    </el-col>
                                    <!--建吧时间-->
                                    <el-col :span="5" :offset="2">
<!--                                        <span class="font_size_16 color_normal_font">建吧时间: 2022 - 4 - 10</span>-->
                                        <span class="font_size_16 color_normal_font">建吧时间: {{bar.sdfTime}}</span>
                                    </el-col>
                                    <!--分类-->
                                    <el-col :span="9" class="padding_left_42" >
                                        <span class="color_gray_tip font_size_16">所属分类：</span>
<!--                                        <el-tag size="medium">-->
<!--                                            <a href="https://www.baidu.com" class="tag_a_link" target="_blank">浩浩</a>-->
<!--                                        </el-tag>-->
<!--                                        <el-tag size="medium">-->
<!--                                            <a href="https://www.baidu.com" class="tag_a_link" target="_blank">最帅滴人儿</a>-->
<!--                                        </el-tag>-->
<!--                                        <el-tag size="medium">-->
<!--                                            <a href="https://www.baidu.com" class="tag_a_link" target="_blank">萌萌哒</a>-->
<!--                                        </el-tag>-->

                                        <el-tag size="small"  v-for="(category, index) in bar.categoryList" :key="category.id" :type="categoryType[index]">
                                            <a :href="'/ctg?ctgId=' + category.id" class="tag_a_link" target="_blank">{{category.name}}</a>
                                        </el-tag>
                                    </el-col>
                                </el-row>

                                <!--描述， 人数， 帖子数-->
                                <el-row class="margin_top_10">
                                    <!--描述-->
                                    <el-col :span="18">
<!--                                        <span class="font_size_18 color_normal_font">管理员很懒，并没有留下和该贴吧有关的描述...</span>-->
                                        <span class="font_size_18 color_normal_font">{{bar.describe}}</span>
                                    </el-col>
                                    <!--人数 + 帖子数-->
                                    <el-col :span="6" class="padding_left_20">
                                        <div>
                                            <span class="color_gray_tip">人数：</span>
<!--                                            <span class="red_color2">201</span>-->
                                            <span class="red_color2">{{bar.peopleNum}}</span>
                                        </div>
                                        <div class="margin_top_8">
                                            <span class="color_gray_tip">帖子数：</span>
<!--                                            <span class="red_color2">6010</span>-->
                                            <span class="red_color2">{{bar.postNum}}</span>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>

                <!--下方帖子和公告-->
                <el-row class="" style="padding: 0 10px 40px;background-color: white; border-top: 1px solid #DCDFE6; border-left: 1px solid #DCDFE6; border-right: 1px solid #DCDFE6; border-bottom: 1px solid #DCDFE6；">
                    <!--帖子模块-->
                    <el-col :span="16" class="" style="padding-right: 18px; margin-top: 16px">
                        <el-tabs type="border-card">
                            <!--热门-->
                            <el-tab-pane label="热门动态">
                                <postList ref="hotPosts"></postList>
                            </el-tab-pane>
                            <!--个性帖-->
                            <el-tab-pane label="个性帖">
                                <postList ref="newPosts"></postList>
                            </el-tab-pane>
                            <!--贴吧内搜索-->
                            <el-tab-pane>
                                <!--标签页头-->
                                <div slot="label">
                                    <el-input v-model="barSearch" placeholder="（贴吧内搜索 - 标题）" clearable size="small" style="width: 200px;"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
                                    <el-button class="margin_left_10" size="small" type="primary" round v-on:click="doSearchPostInBar">搜索</el-button>
                                </div>

                                <!--标签页内容-->
                                <!--搜索记录数说明 + 排序方法下拉框-->
                                <el-row type="flex" class="font line_height_35 margin_bottom_18" justify="space-between">
                                    <el-col :span="14">共搜索到: {{totalRs}} 条符合条件的记录。</el-col>
                                    <el-col :span="9">
                                        <span>排序: </span>
                                        <!--排序方式下拉框-->
                                        <el-select v-model="sortType" placeholder="请选择" size="small" value="" @change="changeOption">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                                <!--搜索结果帖子列表-->
                                <postList ref="searchPosts"  @setTotal="setTotalRs"></postList>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col>
                    <!--公告和时间-->
<!--                    <el-col :span="8" class="" style="padding-left: 5px; padding-top: 15px; border-left: chartreuse solid 1px">-->
                    <el-col :span="8" class="" style="padding-left: 5px; padding-top: 15px;">
                        <div class="little_title_orange">[ 置顶 ]</div>
                        <ul v-if="topPostList.length > 0" id="barTopPosts">
                            <li v-for="top in topPostList" :key="top.id">
                                <el-row class="font" style="border-bottom: #99a9bf 1px solid; margin-top: 10px">
                                    <el-col :span="14">
                                        <el-link style="font-size: 16px; font-weight: 500;" @click="queryTopPost(top.id)" :underline="false">{{top.title}}</el-link>
                                    </el-col>
                                    <el-col :span="6" style="line-height: 23px">
                                        <span>{{top.sdfTime}}</span>
                                    </el-col>
                                    <el-col :span="4">
                                        <span><i class="el-icon-chat-round font_size_23 color_green"></i> {{top.totalReplyNum}}</span>
                                    </el-col>
                                </el-row>
                            </li>

<!--                            <li>-->
<!--                                <el-link :underline="false">最美的不是下雨天，是曾与你躲过雨的屋檐。</el-link>-->
<!--                                2022-4-14-->
<!--                                <span><i class="el-icon-chat-round font_size_23 color_green"></i> 20</span>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <el-link :underline="false">回忆的画面，在荡着秋千梦开始不见。</el-link>-->
<!--                                2022-4-14-->
<!--                                <span><i class="el-icon-chat-round font_size_23 color_green"></i> 20</span>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <el-link :underline="false">你说把爱渐渐放下会走更远，又何必去改变已错过的时间。</el-link>-->
<!--                                2022-4-14-->
<!--                                <span><i class="el-icon-chat-round font_size_23 color_green"></i> 20</span>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <el-link :underline="false">你用你的指尖，阻止我说再见，想象你在参身边在完全失去之前，</el-link>-->
<!--                                2022-4-14-->
<!--                                <span><i class="el-icon-chat-round font_size_23 color_green"></i> 20</span>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <el-link :underline="false">你说把爱渐渐放下会走更远，或许命运的签只让我们遇见，只让我们相恋，这一季的秋天，</el-link>-->
<!--                                2022-4-14-->
<!--                                <span><i class="el-icon-chat-round font_size_23 color_green"></i> 20</span>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <el-link :underline="false">飘落后才发现这幸福的碎片，要我怎么捡。</el-link>-->
<!--                                救死扶伤2022-4-14-->
<!--                                <span><i class="el-icon-chat-round font_size_23 color_green"></i> 20</span>-->
<!--                            </li>-->
                        </ul>
                        <div v-else style="margin-top: 20px;">暂无置顶帖。</div>

                        <div class="little_title_blue" style="margin-top: 50px">[ 时间 ]</div>
                        <el-calendar v-model="timeValue" id="barDate">
                        </el-calendar>
                    </el-col>
                </el-row>
<!--                <h1>Welcome to the index of the PostBar!</h1>-->
            </el-col>
        </el-row>

        <!--底部版权-->
        <el-row class="bg_color_shallow_blue">
            <el-col>
                <copy-right></copy-right>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import navigateBar from "@/components/component/navigateBar"; //顶部导航栏，引用的
    import searchBar from "@/components/component/searchBar";  // 顶部导航栏的 全局搜索框
    import btmCopyRight from "@/components/component/btmCopyRight"; // 底部版权
    import indexPostList from "@/components/component/indexPostList"; // 帖子列表

    export default {
        name: "postBarIndex",
        data(){
            return{
                currentUser: {}, /*当前用户*/
                barId: 5,  /*当前贴吧 id*/
                pageSize: 10,  // 页大小， 默认为 10
                topPostList: [] , /*右侧置顶帖子列表*/
                timeValue: new Date(), /*当前时间 用于显示日历 ，  虽然不指定也可以*/
                barSearch: '', // 贴吧内搜索 关键字
                totalRs: 0, // 贴吧搜索结果总条数
                sortType: "reply", // 搜索结果排序方式 默认按照 回复数 由多到少排序
                // 排序方式下拉框数组
                options: [{value: 'view', label: '按浏览量最多'}, {value: 'reply', label: '按回复数最大'}, {value: 'time', label: '发布时间最新'}],

                barHeadUrlPrefix: this.GLOBAL.serverBaseUrl + this.GLOBAL.barHeadImg,
                categoryType: ["default", "success", "danger"],  // 贴吧分类颜色
                bar: {}, // 当前贴吧信息
            }
        },
        created(){
            // 接收参数 （贴吧id）
            this.barId = this.$route.query.barId;

            // 获取贴吧信息
            this.getBarDetailedInfo();

            // 获取置顶帖子
            this.getTopPostsByBar();
        },
        mounted(){  /*此时 dom 节点已经渲染（包括子组件） 可以通过 ref 获取到dom节点*/
            // 初始化帖子列表 （热议贴和 个性贴）
            // 不构造分页   --  无限滚动的形式显示列表
            this.$refs.hotPosts.initByBar("reply", 1, this.pageSize, false, "", this.barId);
            this.$refs.newPosts.initByBar("time", 1, this.pageSize, false, "", this.barId);
        },
        methods:{
            /*获取当前贴吧详细信息， 包括分类、登录用户的加入情况*/
            getBarDetailedInfo(){
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.barDetailedInfo + "?barId=" + this.barId).then(req=>{
                    if (req.data !== ""){
                        if (req.data.rs.result_code === 200){ //后台成功获取帖子列表信息
                            // 处理贴吧 头像及 建吧时间信息
                            this.bar = req.data.barInfo;
                            this.bar.barImg = this.barHeadUrlPrefix + this.bar.barImg;
                            console.log("barImg:" + this.bar.barImg);
                            this.bar.joined = req.data.joined;

                            // 建吧时间
                            let tmpTime = new Date(this.bar.esTime);
                            this.bar.sdfTime = tmpTime.getFullYear() + ' - ' + (tmpTime.getMonth() + 1) + ' - ' + tmpTime.getDate();
                        }else{ // 后台查询发生异常
                            this.$notify.error({
                                title: '错误 - ' + req.data.rs.result_code,
                                message: req.data.rs.msg
                            });
                        }
                    }else {
                        this.$notify.error({
                            title: '服务器错误',
                            message: '糟糕，获取贴吧置顶帖子列表出错了！'
                        });
                    }
                });
            },

            /*以新标签页的方式打开(置顶)帖子界面*/
            /*pid 帖子的id */
            queryTopPost(pid){
                //向后端发送axios请求(异步，所以该请求会在下面的代码后执行，但其实并不影响) 将对应帖子的 浏览数++
                let formData = new FormData();
                formData.append("postId", pid);
                // this.$http.post("http://localhost:8081/post/addPostViewNum", formData).then(req=>{
                this.$http.post(this.GLOBAL.serverBaseUrl + this.GLOBAL.postAddViewNum, formData).then(req=>{
                    if (req.data !== ''){
                        switch (req.data.result_code) {
                            case 200: // 正常+1  则将对应帖子的 viewNum ++(前端)
                                /*
                                    触发在父组件中定义的事件 updateInfo 并传递参数  this.editUser
                                    emit： 放行 发出 发表
                                * */
                                // this.$emit('updatePostList', index);
                                // this.updatePost(index);
                                // 因为本来置顶帖子就不显示 浏览量, 所以这里不用做出更改
                                break;
                            case 300:   // 数据库插入 受影响行数< 1
                            case 303:  // 数据库插入发生异常
                                this.$notify.error({
                                    title: '错误',
                                    message: req.data.msg,
                                    duration: 0,   /*出错则设置为不自动关闭*/
                                });
                                break;
                            default:
                                this.$notify.error({
                                    title: '错误',
                                    message: '未知错误！！！',
                                    duration: 0,   /*出错则设置为不自动关闭*/
                                });
                        }
                    }else {
                        this.$message.error('糟糕，服务器出事了。。');
                    }
                });

                let routeUrl = this.$router.resolve({
                    path: "/postInfo",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    query: {pid: pid},  //通过 query（params不行） 传参   在目标页面通过 this.$route.query.role 来接收参数
                });

                //以新标签页的方式打开
                window.open(routeUrl.href, "_blank");
            },

            // 设置 搜索结果总条目数
            setTotalRs(total){
                this.totalRs = total;
            },

            // 排序方式下拉框 改变时触发的钩子函数
            // 参数为： 目前的选中值 option对应的value
            changeOption(current){
                console.log("当前选中：" + current);
                this.sortType = current;

                this.$refs.searchPosts.updateListWithSort(current);
            },

            // 点击搜索按钮   在 贴吧内进行帖子搜索（按照帖子标题）
            doSearchPostInBar(){
                // 重新 初始化搜索结果帖子列表
                this.$refs.searchPosts.initByBarWithPage(this.sortType, 1, this.pageSize, true, this.barSearch, this.barId);
            },

            // 设置当前用户信息
            setCurrentUser(curUser){
                this.currentUser = curUser;
            },

            // 向后端请求当前贴吧 置顶的帖子列表（按照置顶时间倒序排序）
            getTopPostsByBar(){
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.postGetTop + "?barId=" + this.barId).then(req=>{
                    if (req.data !== ""){
                        if (req.data.rs.result_code === 200){ //后台成功获取帖子列表信息
                            // 处理帖子时间信息
                            let postList = req.data.list;

                            for (let i = 0; i < postList.length; i++){
                                // 帖子发表时间
                                let pbTime = new Date(postList[i].pbTime);
                                postList[i].sdfTime = pbTime.getFullYear() + '-' + (pbTime.getMonth() + 1) + '-' + pbTime.getDate();
                            }

                            this.topPostList = postList;
                        }else{ // 后台查询发生异常
                            this.$notify.error({
                                title: '错误 - ' + req.data.rs.result_code,
                                message: req.data.rs.msg
                            });
                        }
                    }else {
                        this.$notify.error({
                            title: '服务器错误',
                            message: '糟糕，获取贴吧置顶帖子列表出错了！'
                        });
                    }
                });
            },

            /*加入贴吧和退出贴吧的方法连同 按钮其实可以封装成一个组件来调用   文字、大小用参数传递即可*/
            /*加入贴吧*/
            joinBar(barId){
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.barJoin + "?id=" + barId).then(req=>{
                    if (req.data !== '') {
                        if (req.data.result_code === 200) { /*成功加入*/
                            this.$notify({
                                title: '成功',
                                message: req.data.msg,
                                type: 'success',
                                duration: 3000,   /*设置为3秒后  自动关闭*/
                            });
                            // 加入成功后修改 用户贴吧关联rvcMap  对应的值为true
                            this.bar.joined = true;
                            //对应bar人数 ++
                            this.bar.peopleNum++;
                        } else if (req.data.result_code === 605) {  /*用户未登录*/
                            this.$notify.info({
                                title: '消息',
                                message: req.data.msg,
                                duration: 3000,   /*设置为3秒后  自动关闭*/
                            });
                        } else if (req.data.result_code === 300 || req.data.result_code === 303) {  /*数据库插入失败  或  发生异常*/
                            this.$notify.error({
                                title: '错误',
                                message: req.data.msg,
                                duration: 0,   /*出错则设置为不自动关闭*/
                            });
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '未知错误！！！',
                                duration: 0,   /*出错则设置为不自动关闭*/
                            });
                        }
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '糟糕，服务器出事了。。',
                            duration: 0,   /*出错则设置为不自动关闭*/
                        });
                    }
                })
            },

            /*退出贴吧*/
            exitBar(barId){
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.barExit + "?id=" + barId).then(req=>{
                    if (req.data !== '') {
                        if (req.data.result_code === 200) { /*成功加入*/
                            this.$notify({
                                title: '成功',
                                message: req.data.msg,
                                type: 'success',
                                duration: 3000,   /*设置为3秒后  自动关闭*/
                            });
                            // 退出成功后修改 用户贴吧关联rvcMap  对应的值为false(未加入)
                            this.bar.joined = false;
                            //对应bar人数 --
                            this.bar.peopleNum--;
                        } else if (req.data.result_code === 605) {  /*用户未登录  这个时候未登录显示退出按钮是不合理的 此时给出提示信息并刷新页面获取最新值*/
                            this.$message({
                                showClose: true,
                                message: req.data.msg,
                                type: 'warning',
                                duration: 0 /*设置为不自动关闭*/
                            });
                        } else if (req.data.result_code === 301 || req.data.result_code === 303) {  /*数据库插入失败  或  发生异常*/
                            this.$notify.error({
                                title: '错误',
                                message: req.data.msg,
                                duration: 0,   /*出错则设置为不自动关闭*/
                            });
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '未知错误！！！',
                                duration: 0,   /*出错则设置为不自动关闭*/
                            });
                        }
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '糟糕，服务器出事了。。',
                            duration: 0,   /*出错则设置为不自动关闭*/
                        });
                    }
                })
            },
        },
        components: {
            'topNav': navigateBar,  //顶部导航栏
            'searchBar': searchBar, // 顶部搜索框
            'copyRight': btmCopyRight, // 底部版权
            "postList": indexPostList, // 帖子列表
        },


    }
</script>

<style scoped>
    ul{
        list-style: none;
        /*list-style: url("../../assets/images/topIcon.png");*/
        margin: 0;
        padding: 0;
    }
    #barTopPosts li{
        margin: 0;
        padding: 0 0 0 38px;

        /*置顶背景图*/
        background-image: url("../../assets/images/topIcon.png");
        background-repeat: no-repeat;
        background-size: 34px 21px;
    }

    /* 加入 或  退出贴吧 按钮*/
    .join_bar_btn{
        position: relative;
        top: -5px;
        left: 15px;
    }

    /*顶部贴吧信息*/
    .top_bar_info{
        height: 118px;
        background-color: #F2F6FC;
        margin-top: 180px
    }

    /*上方 贴吧信息背景 banner*/
    .top_banner_bg{
        /*980 x 180*/
        background-image: url("../../assets/images/postBarTopBanner.jpg");
        background-repeat: repeat-x;
        /*x 轴向右偏移 70px  y轴向下偏移0px*/
        background-position: 70px 0px;
    }

    /* 贴吧名称 h1*/
    h1{
        display: inline-block;
        font-size: 20px;
        color: #303133
    }
</style>